<template>
    <div class="top-information">
        <div class="head-name">
            <div class="head-img">
                <img v-if="!src" src="../../../../static/images/user-portrait.png" />
                <img v-else :src="src" />
            </div>
            <div class="name-address">
                <div class="name">{{name}}</div>
                <div class="address">{{address}}</div>
            </div>
        </div>
        <div class="edit">
            <img src="../../../../static/images/edit-round.png" alt="">
            <span @click="$router.push('/salesman/edit-information');">编辑</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "information",
        props:['src','name','address'],
        data(){
            return{
            }
        }
    }
</script>

<style lang="scss" scoped>
    .top-information{
        background-image: url("../../../../static/images/back-ripple.png");
        background-size: 100% 100%;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        color: #ffffff;
        
        .head-name{
            display: flex;
            align-items: center;
            .head-img{
                img{
                    width: 6.2rem;
                    height: 6.2rem;
                    margin-right: 1rem;
                }
            }
            .name-address{
                .name{
                    font-size: 1.8rem;
                }
                .address{
                    font-size: 1.2rem;
                    margin-top: .1rem;
                }
            }
        }
        .edit{
            font-size: 1rem;
            img{
                width: 1rem;
                height: 1rem;
            }
        }
    }

</style>
